<template>
    <n-card class="card-container">
        <n-form ref="formRef" :model="formData" :rules="rules" label-placement="left" label-width="auto" require-mark-placement="right-hanging">
            <n-form-item label="路由" path="path">
                <n-input v-model:value="formData.path" placeholder="请输入路由" />
            </n-form-item>
            <n-form-item label="描述" path="description">
                <n-input v-model:value="formData.description" placeholder="请输入描述" />
            </n-form-item>
            <n-form-item label="请求方式" path="method">
                <n-radio-group v-model:value="formData.method" name="method">
                    <n-space>
                        <n-radio value="get">get</n-radio>
                        <n-radio value="post">post</n-radio>
                        <n-radio value="put">put</n-radio>
                        <n-radio value="delete">delete</n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>
            <n-form-item label="是否禁用" path="disable">
                <n-switch v-model:value="formData.disable" />
            </n-form-item>
            <div class="form-btn-container" style="margin-bottom: 20px">
                <p style="text-align: left">请求参数:</p>
                <n-data-table :single-line="false" :columns="requiredParame" :data="formData.requiredParame" />
                <n-button class="btn-w100_" type="primary" @click="addRequireParame(formData)">添加参数</n-button>
            </div>
            <n-form-item label="蓝图" path="handler">
                <n-button @click="clickLitefraphEdit">编辑蓝图</n-button>
            </n-form-item>
            <div class="form-btn-container">
                <n-button class="btn-w100_" type="primary" @click="handleSubmit">确认</n-button>
            </div>
        </n-form>
    </n-card>
</template>
<script>
import { h } from "vue";
import { cloneDeep } from "lodash";
import { NButton } from "naive-ui";
import { CpcDrawerCtrl } from "../../../components/CpcDrawer/CpcDrawerCtrl";
import ParameEdit from "./ParameEdit.vue";

export default {
    components: {},
    props: {
        datas: {
            type: Object,
            default: () => {
                return {
                    path: "/",
                    method: "get",
                    description: "",
                    disable: false,
                    handler: "ctx.body = '我成功了'",
                    requiredParame: [],
                };
            },
        },
        callBack: {
            type: Function,
        },
        close: {
            type: Function,
        },
    },
    data() {
        const self = this;
        return {
            formData: cloneDeep(this.datas),
            rules: {
                handler: [
                    {
                        required: true,
                        trigger: ["blur", "input"],
                        message: "请输入邮箱，没有就去申请一个",
                    },
                ],
            },
            requiredParame: [
                {
                    title: "字段",
                    key: "field",
                    align: "center",
                },
                {
                    title: "是否必选",
                    key: "required",
                    align: "center",
                    render(row) {
                        return h(
                            NButton,
                            {
                                type: row.required ? "error" : "primary",
                                ghost: true,
                                size: "small",
                            },
                            { default: () => (row.required ? "必选" : "可选") }
                        );
                    },
                },
                {
                    title: "默认值",
                    key: "defaultValue",
                    align: "center",
                },
                {
                    title: "操作",
                    key: "caozuo",
                    align: "center",
                    render(row, index) {
                        return h(
                            "div",
                            null,
                            h(
                                NButton,
                                {
                                    type: "primary",
                                    ghost: true,
                                    size: "small",
                                    onclick: () => {
                                        self.editRequireParame(self.formData, index);
                                    },
                                },
                                { default: () => "编辑" }
                            ),
                            h(
                                NButton,
                                {
                                    type: "error",
                                    ghost: true,
                                    size: "small",
                                    onclick: () => {
                                        self.editRequireParame(row, index);
                                    },
                                },
                                { default: () => "删除" }
                            )
                        );
                    },
                },
            ],
        };
    },
    methods: {
        addRequireParame(formData) {
            CpcDrawerCtrl.open(
                {
                    component: ParameEdit,
                    callBack: (data, close) => {
                        formData.requiredParame.push(data);
                        close();
                    },
                },
                { styleType: "center", isMaskEvent: false }
            );
        },
        editRequireParame(formData, index) {
            CpcDrawerCtrl.open(
                {
                    component: ParameEdit,
                    data: formData.requiredParame[index],
                    callBack: (data, close) => {
                        formData.requiredParame[index] = data;
                        close();
                    },
                },
                { styleType: "center", isMaskEvent: false }
            );
        },
        clickLitefraphEdit() {
            CpcDrawerCtrl.open(
                {
                    component: "LitegraphLayer",
                    callBack: (data, close) => {},
                },
                { title: "编辑蓝图", styleType: "full", isMaskEvent: false }
            );
        },
        handleSubmit(e) {
            e.preventDefault();
            this.$refs.formRef.validate(async errors => {
                if (errors) {
                    return;
                }
                if (this.callBack) {
                    this.callBack(this.formData);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.btn-w100_ {
    margin-top: 10px;
    width: 100%;
}
</style>
